<template>
  <view
    @click="viewDetail(appointment.userId)"
    class="appointment-card"
  >
    <view class="appointment-info">
      <text class="appointment-label">预约</text>
      <br />
      <text
        class="appointment-status"
        :style="{ color: statusColor }"
        >{{ statusText }}</text
      >
    </view>
    <text class="appointment-title">预约人：{{ appointment.professorName }}</text>
    <br />
    <text class="appointment-time"
      >预约时间：{{ appointment.appointmentTime }}</text
    >
    <br />
    <text class="appointment-content"
      >预约事项：{{ appointment.appointmentContent }}</text
    >
  </view>
</template>

<script>
  import { getStatusColor, getStatusText } from "@/common/utils";
import { ROUTE_PATHS } from "@/router/routes";

  export default {
		name: "AppointmentCard",
    props: {
      /**
       * 预约数据
       * @type {Object}
       * @property {string} id 预约id
       * @property {string} professorName 预约专家姓名
       * @property {string} appointmentTime 预约时间
       * @property {string} appointmentContent 到访事项
       * @property {string} lastAuditingStatus 预约状态
       */
      appointment: {
        type: Object,
        required: true,
      },
    },

    computed: {
      /**
       * 预约状态展示文字
       */
      statusText() {
        return getStatusText(this.appointment.lastAuditingStatus);
      },
      /**
       * 预约状态展示颜色
       */
      statusColor() {
        return getStatusColor(this.appointment.lastAuditingStatus);
      },
    },

    methods: {
      /**
       * 查看预约详情,跳转至预约详情页
       */
      viewDetail() {
        this.$Router.push({
          path: ROUTE_PATHS.APPOINTMENT_DETAIL,
          query: { id: this.appointment.id },
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .appointment-card {
    padding: var(--margin-base);
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .appointment-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .appointment-label {
    font-size: var(--font-size-small);
    color: #555;
  }

  .appointment-status {
    float: right;
    font-size: var(--font-size-small);
  }

  .appointment-title {
    font-size: var(--font-size-base);
    font-weight: bold;
    color: #333;
  }

  .appointment-time,
  .appointment-content {
    font-size: var(--font-size-base);
    color: #666;
  }
</style>
